<template>
  <div v-loading="loading" class="app-container">
    <div class="head-container">
      <el-form :model="params" class="searchform" :inline="true" size="mini" label-width="auto">
        <el-form-item label="部门号">
          <el-input v-model="params.deptNbr" placeholder="输入部门号查询" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item label="UPC">
          <el-input v-model="params.upcNbr" placeholder="输入UPC查询" clearable style="width: 200px;" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" style="float:right;margin-right:0px;" icon="el-icon-refresh" round @click="resetForm">重置</el-button>
          <el-button size="mini" type="primary" style="float:right;margin-right:0px;" icon="el-icon-search" round @click="toQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="padding-top:5px">
      <el-button size="mini" type="primary" style="float:right;margin-left:0px;" round @click="doDownloadTemplate">模板下载</el-button>
      <el-upload
        ref="upload"
        :auto-upload="false"
        :on-change="handleFileChange1"
        :show-file-list="false"
        :limit="1"
        :multiple="false"
        action="#"
        accept=""
        style="float:right;margin-left:0px;"
      >
        <el-button size="mini" type="primary" round>鲜食全量导入</el-button>
      </el-upload>
      <el-upload
        ref="upload"
        :auto-upload="false"
        :on-change="handleFileChange2"
        :show-file-list="false"
        :limit="1"
        :multiple="false"
        action="#"
        accept=""
        style="float:right;margin-left:0px;"
      >
        <el-button size="mini" type="primary" round>非鲜全量导入</el-button>
      </el-upload>
      <el-table ref="dataTab" :data="data" stripe size="mini" border style="width: 100%;" @header-dragend="colChange">
        <el-table-column :show-overflow-tooltip="true" label="部门" prop="deptNbr" :width="colWidths.deptNbr" />
        <el-table-column :show-overflow-tooltip="true" label="条码" prop="upcNbr" :width="colWidths.upcNbr" />
        <el-table-column :show-overflow-tooltip="true" label="条码说明" prop="upcDesc" :width="colWidths.upcDesc" />
        <el-table-column :show-overflow-tooltip="true" label="数据类型" prop="dataType" :width="colWidths.dataType">
          <template slot-scope="scope">
            <span v-if="scope.row.dataType === 1">鲜食</span>
            <span v-if="scope.row.dataType === 2">非鲜食</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="创建人" prop="createdBy" :width="colWidths.createdBy" />
        <el-table-column :show-overflow-tooltip="true" label="创建时间" prop="createdTime" :width="colWidths.createdTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page.sync="currentPage"
        :page-sizes="[50,100,500]"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { parseTime } from '@/utils/index'
import initData from '@/api/olm/initData'
import { importNBOListData } from '@/api/olm/nboList'
import { getDownLoadTemplateUrl } from '@/api/plugs'
import { authentication } from '@/utils/processingData.js'

export default {
  mixins: [initData],
  data() {
    return {
      loading: false
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseTime,
    beforeInit() {
      this.url = process.env.VUE_APP_BASE_API3 + '/nboList/queryPageList'
      this.params.pageNum = this.page
      this.params.pageSize = this.size
      return true
    },
    // 查询
    toQuery() {
      this.page = 0
      this.currentPage = 1
      this.init()
    },
    // 查询栏重置触发
    resetForm() {
      this.params = {}
    },
    // 鲜食
    handleFileChange1(file, fileList) {
      this.handleFileChange(file, fileList, 1)
    },
    // 非鲜
    handleFileChange2(file, fileList) {
      this.handleFileChange(file, fileList, 2)
    },
    // 文件变动的钩子-附件上传
    handleFileChange(file, fileList, dataType) {
      if (!(file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {
        Message({
          message: '请上传格式为 xlsx 的Excel文件。',
          type: 'warning',
          duration: 3 * 1000
        })
        fileList.pop()
      }
      var size = file.size / 1024 / 1024
      if (size > 5) {
        Message({
          message: '文件大小必须小于5M。',
          type: 'warning',
          duration: 3 * 1000
        })
        fileList.pop()
      } else {
        this.$confirm('是否批量新增？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          var formData = new FormData()
          formData.append('file', file.raw)
          formData.append('dataType', dataType)
          importNBOListData(formData).then(_ => {
            this.loading = false
            this.toQuery()
            Message({
              message: '上传成功。',
              type: 'success',
              duration: 3 * 1000
            })
          }, error => {
            console.log(error)
            this.loading = false
          })
          fileList.pop()
        })
      }
    },
    // 模板下载
    doDownloadTemplate() {
      var val = '?changeType=302&templateType=4'
      getDownLoadTemplateUrl(val).then(res => {
        if (res) {
          window.open(authentication(res))
        } else {
          Message({
            message: '未找到模板请模板维护',
            type: 'warning',
            duration: 2 * 1000
          })
        }
      })
    }
  }
}
</script>

